<template>
    <div class="collapse-item mb-4">
        <div :class="`${isCollapse ? 'box-selected' : ''}`">
            <div :class="`collapse-head ${isCollapse ? 'collapse-head-selected' : ''}`">
                <div>
                    <span v-if="!slots.title" class="collapse-title">{{ attrs.title }}</span>
                    <slot name="title"></slot>
                </div>
                <div class="collapse-head-right">
                    <img :src="isCollapse ? iconDel : iconAdd" alt="" width="30" height="30" style="cursor: pointer" @click.stop="handlePanelItemClick" />
                </div>
            </div>
            <!-- <el-icon class="caret-down" :class="{ 'caret-open': isCollapse }" @click.stop="handlePanelItemClick">
                <CaretRight />
            </el-icon> -->
        </div>
        <CollapseTransition>
            <div v-if="isCollapse" class="collapse-content py-3">
                <slot name="content"></slot>
            </div>
        </CollapseTransition>
    </div>
</template>

<script setup lang="ts">
import { ref, useSlots, useAttrs, inject, computed, onMounted, nextTick } from "vue";
import CollapseTransition from "./CollapseTransition.vue";

import iconAdd from "@/assets/img/products/detail/add.png";
import iconDel from "@/assets/img/products/detail/del.png";

const slots = useSlots();
const attrs = useAttrs();
const activeNames = inject("activeNames");
const handleToggle = inject("toggle");
const status = ref(false); // 开展状态

const isCollapse = computed(() => {
    return activeNames["value"].includes(attrs.name);
});

const handlePanelItemClick = () => {
    handleToggle(attrs.name);
};
onMounted(() => {
    console.log("222");
    if (attrs.name == 5) {
        handleToggle(5);
    }
    nextTick(() => {
        console.log("1111111111", attrs.name);
    });
});
</script>

<style scoped>
.collapse-item {
    display: flex;
    flex-flow: column;
}
.box-selected {
    background: linear-gradient(to top, white 0%, white 50%, #f3f3f300 50.01%, #f3f3f300 100%);
}
.collapse-head {
    display: flex;
    /* flex-flow: row nowrap; */
    align-items: center;
    justify-content: space-between;
    height: 4.4rem;
    background: #000;
    padding: 0 4rem;
    border-bottom: none;
    border-radius: 2.2rem;
    overflow: hidden;
}
.collapse-head-selected {
    background: #ed1c24;
}
.caret-down {
    font-size: 20px;
    color: #1b1b1b;
    margin-right: 6px;
    cursor: pointer;
    transition: transform 0.3s;
    transform-origin: center center;
}
.caret-open {
    transform: rotate(90deg);
}
.collapse-head-right {
    /* flex: 1;
    width: 0; */
}
.collapse-title {
    font-size: 14px;
    color: #1b1b1b;
}
.collapse-content {
    width: 100%;
    background: #fff;
    padding: 2rem;
    border-radius: 0 0 1rem 1rem;
}
</style>
